<template>
  <div style="height: 25px; border-top: 1px solid #d8dce5;padding-right: 40px;">
    <div style="float: left; margin-left: 1.4%;">
      <el-button type="text" size="mini" @click="backOff" :disabled="backOffDisabled">
        <i class="iconfont">&#xe645;</i>
      </el-button>
      <el-button type="text" size="mini" @click="forward" :disabled="forwardDisabled">
        <i class="iconfont">&#xe648;</i>
      </el-button>

    </div>
    <div class="button">
      <el-button type="text" size="mini" @click="openFolderDialog">新建文件夹</el-button>
      <el-button type="text" size="mini" @click="openFileDialog">新建文件</el-button>
      <el-button type="text" size="mini" @click="openFileUploadDialog">上传文件</el-button>
      <el-button type="text" size="mini" @click="openSearchDialog">查询</el-button>
    </div>
    <file-dialog :dialog-visible="fileDialogVisible" @cancel="closeFileDialog" @sure="findFiles"></file-dialog>
    <file-upload-dialog :dialog-visible="fileUploadDialogVisible" @cancel="closeFileUploadDialog"
                        @sure="findFiles"></file-upload-dialog>
    <folder-dialog :dialog-visible="folderDialogVisible" @cancel="closeFolderDialog"
                   @sure="findFolders"></folder-dialog>
    <search-dialog :dialog-visible="searchDialogVisible" @cancel="closeSearchDialog" @sure="search"></search-dialog>
  </div>
</template>

<script>
  import FileDialog from './dialog/fileDialog'
  import FolderDialog from './dialog/folderDialog'
  import SearchDialog from './dialog/searchDialog'
  import FileUploadDialog from './dialog/fileUploadDialog'
  import {fileService} from '../../service/fileService'
  import {mapState} from 'vuex'

  export default {
    name: 'header',
    components: {FileUploadDialog, SearchDialog, FolderDialog, FileDialog},
    data () {
      return {
        fileDialogVisible: false,
        folderDialogVisible: false,
        searchDialogVisible: false,
        fileUploadDialogVisible: false,
        files: []
      }
    },
    computed: mapState({
      backOffDisabled: state => state.folder.backPathStack.length < 1,
      forwardDisabled: state => state.folder.forwardPathStack.length < 1
    }),
    methods: {
      openFileDialog () { // 打开对话框
        this.fileDialogVisible = true
      },
      closeFileDialog () { // 关闭对话框
        this.fileDialogVisible = false
      },
      findFiles () {
        this.$emit('files')
        this.closeFileDialog()
        this.closeFileUploadDialog()
      },
      closeFileUploadDialog () {
        this.fileUploadDialogVisible = false
      },
      openFileUploadDialog () {
        this.fileUploadDialogVisible = true
      },
      openFolderDialog () {
        this.folderDialogVisible = true
      },
      closeFolderDialog () {
        this.folderDialogVisible = false
      },
      findFolders () {
        // 新增文件夹之后更新文件夹
        let userId = this.$store.getters.userInfo.userId
        this.$store.commit('FIND_ALL_FOLDERS', userId)
        this.$store.state.folder.isAddFolder = true
        this.closeFolderDialog()
      },
      openSearchDialog () {
        this.searchDialogVisible = true
      },
      closeSearchDialog () {
        this.searchDialogVisible = false
      },
      search (file) {
        this.$emit('search', file)
        this.closeSearchDialog()
      },
      backOff () { // 后退
        this.$store.commit('PATH_BACKOFF')
      },
      forward () { // 前进
        this.$store.commit('PATH_FORWARD')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .button {
    float: right;

    /*.el-button--text {*/
    /*color: #fff !important;*/
    /*}*/
  }
</style>
